<template>
    <el-dialog title="批量导入" :close-on-click-modal="false" :visible.sync="visible"
        class="SHZY-dialog SHZY-dialog_center SHZY-dialog-import" lock-scroll width="1000px" @close="closeAddDialog()">
        <el-steps :active="active" align-center>
            <el-step title="上传文件"></el-step>
            <el-step title="数据预览"></el-step>
            <el-step title="导入数据"></el-step>
        </el-steps>
        <div class="import-main" v-show="active == 1">
            <div class="upload">
                <div class="up_left">
                    <img src="@/assets/images/upload.png">
                </div>
                <div class="up_right">
                    <p class="title">上传填好的数据表</p>
                    <p class="tip">文件后缀名必须是xls或xlsx，文件大小不超过5M</p>
                    <el-upload :action="define.comUrl + '/api/BaseData/Material/Uploader'"
                        :headers="{ Authorization: $store.getters.token }" :on-success="handleSuccess"
                        :on-remove="handleRemove" :before-remove="beforeRemove" :on-change="handleChange"
                        :file-list="fileList" accept=".xls,.xlsx" :before-upload="beforeUpload" class="upload-area">
                        <el-button type="text">上传文件</el-button>
                    </el-upload>
                </div>
            </div>
            <div class="upload">
                <div class="up_left">
                    <img src="@/assets/images/import.png">
                </div>
                <div class="up_right">
                    <p class="title">填写导入数据信息</p>
                    <p class="tip">请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除</p>
                    <el-button type="text" @click="templateDownload">下载模板</el-button>
                </div>
            </div>
        </div>
        <div class="import-main" v-show="active == 2">
            <SHZY-table v-loading="listLoading" :data="list">
                <el-table-column label="规则编码" prop="code" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.code" />
                    </template>
                </el-table-column>
                <el-table-column label="规则描述" prop="desc" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.desc" />
                    </template>
                </el-table-column>
                <el-table-column label="有效开始时间" prop="startDate" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.startDate" />
                    </template>
                </el-table-column>
                <el-table-column label="有效结束时间" prop="endDate" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.endDate" />
                    </template>
                </el-table-column>
                <el-table-column label="阶段" prop="stage" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.stage" />
                    </template>
                </el-table-column>
                <el-table-column label="阶段描述" prop="stageDesc" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.stageDesc" />
                    </template>
                </el-table-column>
                <el-table-column label="条件" prop="judeCondition" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.judeCondition" />
                    </template>
                </el-table-column>
                <el-table-column label="连续天数" prop="continuityDay" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.continuityDay" />
                    </template>
                </el-table-column>
                <el-table-column label="合格数" prop="inspLot" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.inspLot" />
                    </template>
                </el-table-column>
                <el-table-column label="与批次关系" prop="keyWord" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.keyWord" />
                    </template>
                </el-table-column>
                <el-table-column label="新阶段" prop="okStageNo" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.okStageNo" />
                    </template>
                </el-table-column>
                <el-table-column label="拒绝" prop="rejectNun" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.rejectNun" />
                    </template>
                </el-table-column>
                <el-table-column label="NG新阶段" prop="ngStageNo" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.ngStageNo" />
                    </template>
                </el-table-column>
                <el-table-column label="初始阶段" prop="isDefault" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.isDefault" />
                    </template>
                </el-table-column>
                <el-table-column label="免检" prop="isExempt" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.isExempt" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="50">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" class="SHZY-table-delBtn"
                            @click="handleDel(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </SHZY-table>
        </div>
        <div class="import-main" v-show="active == 3">
            <div class="success" v-if="result.resultType == 1">
                <img src="@/assets/images/success.png" alt="">
                <p class="success-title">批量导入成功</p>
                <p class="success-tip">您已成功导入{{ result.snum }}条数据</p>
            </div>
            <div class="unsuccess" v-if="result.resultType == 0">
                <el-alert title="错误提醒：导入失败数据展示" type="warning" show-icon :closable="false" />
                <div class="upload error-show">
                    <div class="up_left">
                        <img class="" src="@/assets/images/tip.png">
                    </div>
                    <div class="up_right">
                        <p class="tip">正常数量条数：<el-link type="success" :underline="false">{{ result.snum }}条
                            </el-link>
                        </p>
                        <p class="tip">异常数量条数：<el-link type="danger" :underline="false">{{ result.fnum }}条
                            </el-link>
                        </p>
                    </div>
                </div>
                <p class="contips">以下文件数据为导入异常数据</p>
                <SHZY-table :data="resultList" height="280px">
                    <el-table-column label="规则编码" prop="code" width="150" :show-overflow-tooltip="true"/>
                    <el-table-column label="规则描述" prop="desc" width="150" :show-overflow-tooltip="true"/>
                    <el-table-column label="有效开始时间" prop="startDate" width="150" :show-overflow-tooltip="true"/>
                    <el-table-column label="有效结束时间" prop="endDate" width="150" :show-overflow-tooltip="true"/>
                    <el-table-column label="阶段" prop="stage" width="150" :show-overflow-tooltip="true"/>
                    <el-table-column label="阶段描述" prop="stageDesc" width="150" :show-overflow-tooltip="true"/>
                    <el-table-column label="条件" prop="judeCondition" width="150" :show-overflow-tooltip="true"/>
                    <el-table-column label="连续天数" prop="continuityDay" width="150" :show-overflow-tooltip="true"/>
                    <el-table-column label="合格数" prop="inspLot" width="150" :show-overflow-tooltip="true"/>
                    <el-table-column label="与批次关系" prop="inspLot" width="150" :show-overflow-tooltip="true"/>
                    <el-table-column label="新阶段" prop="okStageNo" width="150" :show-overflow-tooltip="true"/>
                    <el-table-column label="拒绝" prop="rejectNun" width="150" :show-overflow-tooltip="true"/>
                    <el-table-column label="NG新阶段" prop="ngStageNo" width="150" :show-overflow-tooltip="true" />
                    <el-table-column label="初始阶段" prop="isDefault" width="150" :show-overflow-tooltip="true"/>
                    <el-table-column label="免检" prop="isExempt" width="150" :show-overflow-tooltip="true"/>
                    <el-table-column prop="exceptionMsg" label="异常信息" :show-overflow-tooltip="true" />
                </SHZY-table>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" v-if="active == 1">取 消</el-button>
            <el-button @click="prev" v-if="active == 2">上一步</el-button>
            <el-button @click="next" type="primary" v-if="active < 3" :loading="btnLoading"
                :disabled="active == 1 && !fileName">下一步
            </el-button>
            <el-button @click="cancel(true)" type="primary" v-else>关 闭</el-button>
        </span>
    </el-dialog>
</template>
  
<script>
import { TemplateDownload, ImportData, ImportPreview } from '@/api/q1/basedata/inspectionRole'
export default {
    data() {
        return {
            flag: false,
            visible: false,
            btnLoading: false,
            listLoading: false,
            fileName: '',
            fileList: [],
            active: 1,
            list: [],
            resultList: [],
            result: {
                resultType: 0,
                snum: 0,
                fnum: 0
            },
        }
    },
    created() {
    },
    methods: {
        closeAddDialog() {
            this.visible = false
            this.$emit('refresh')
        },
        prev() {
            if (this.active == 1) return
            this.active--

            this.fileList = []
            this.fileName = ''
        },
        next() {
            if (this.active == 2) {
                if (!this.list.length) return this.$message({ message: '导入数据为空', type: 'warning' })
                this.btnLoading = true
                ImportData({ list: this.list }).then(res => {
                    this.result = res.data
                    this.resultList = res.data.failResult
                    this.btnLoading = false
                    this.active++
                }).catch(() => { this.btnLoading = false })
            }
            if (this.active == 1) {
                if (!this.fileList.length || !this.fileName) return this.$message({ message: '请先上传文件', type: 'warning' })
                this.btnLoading = true
                ImportPreview({ fileName: this.fileName }).then(res => {
                    this.list = res.data.dataRow
                    this.btnLoading = false
                    this.active++
                }).catch(() => { this.btnLoading = false })
            }
        },
        cancel(isRefresh) {
            this.visible = false
            if (isRefresh) this.$emit('refresh')
        },
        init() {
            this.active = 1
            this.fileList = []
            this.fileName = ''
            this.visible = true
        },
        handleDel(index) {
            this.list.splice(index, 1)
        },
        templateDownload() {
            TemplateDownload().then(res => {
                this.shzy.downloadFile(res.data.url)
            })
        },
        beforeUpload(file) {
            console.log(file.size);
            let isRightSize = file.size <= 1024 * 1024 * 5;
            if (!isRightSize) {
                this.flag = true;
                this.$message.error(`文件大小不能超过5M`)
                return isRightSize
            } else {
                this.flag = false;
            }
        },
        handleRemove(file, fileList) {
            this.fileList = []
        },
        beforeRemove(file, fileList) {
            if (this.flag) {
                return;
            } else {
                return this.$confirm(`确定移除 ${file.name}？`)
            }

        },
        handleChange(file, fileList) {
            this.fileList = fileList.slice(-1)
        },
        handleSuccess(res, file, fileList) {
            if (res.code == 200) {
                this.fileList = fileList.slice(-1)
                this.fileName = res.data.name
            } else {
                this.fileList = fileList.filter(o => o.uid != file.uid)
                this.$message({ message: res.msg, type: 'error', duration: 1000 })
            }
        }
    }
}
</script>
<style>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>